// 详情页的逻辑

//0.获取元素
const imgBox = document.querySelector('.img');
const smallImgBox = document.querySelector('.small_img');
const titleBox = document.querySelector('h2');
const priceBox = document.querySelector('.price span');
const saleBox = document.querySelector('.sale>p:nth-child(1)>span');
const onBox = document.querySelector('.on_off>.on');
const offBox = document.querySelector('.on_off>.off');
const regBox = document.querySelector('.regi');

const bigInfo = document.querySelector('.info');
//1.登录检测
loginTest();
async function loginTest() {
    const id = window.localStorage.getItem('id');
    const token = window.localStorage.getItem('token');
    if(!id || !token) {
        window.localStorage.setItem('url', 'list');
        window.location.href = './login.html';
        return;
    }
    // 发送请求，检测token的有效性
    const res = await pAjax({
        url: 'http://localhost:8888/users/info',
        data: `id=${id}`,
        dataType:'json',
        token,
    })
    
    if(res.code === 1) {
       offBox.classList.remove('active');
       onBox.innerText = res.info.nickname;
       onBox.classList.add('active');
       regBox.style.visibility = 'hidden';
    }else{
        window.localStorage.setItem('url', 'list');
        window.location.href = './login.html';
        return;
    }
}


// if(JSON.parse(window.localStorage.getItem('carData')))  {
//     infoArr = JSON.parse(window.localStorage.getItem('carData'));
// }
// 1.拿到存储在本地的信息，渲染页面
const infoArr = JSON.parse(window.localStorage.getItem('infoArr'));
const id = window.localStorage.getItem('goodsId')
const data = infoArr.find(item => item.id === id);
const index = infoArr.indexOf(data);
bigInfo.innerHTML = `
    <div class="photo" id="enlar">
        <div class="img"><img src="${data.img_url}" alt=""></div>
        <div class="mask"></div>
        <ul class="small_img">
            <li class="active"><img src="${data.img_url}" alt=""></li>
        </ul>
        <div class="big_img"></div>
    </div>
    <div class="goods_info">
        <h2>${data.title}</h2>
        <div class="price">
            <p>现价</p>
            <p>￥<span>${data.price}</span></p>
        </div>
        <div class="yf">
            <p>运费</p>
            <p>江苏苏州&nbsp;至北京&nbsp;快递:0.00&nbsp;EMS:10.00</p>
        </div>
        <div class="sale">
            <p>月销量<span>${data.sale}</span></p>
            <p>累计评价<span>6508</span></p>
            <p>送天猫积分19起</p>
        </div>
        <div class="size">
            <p>尺码</p>
            <div>
                <span class="size_item">M</span>
                <span class="size_item">L</span>
                <span class="size_item">XL</span>
                <span class="size_item">2XL</span>
                <span class="size_item">3XL</span>
            </div>
        </div>
        <div class="sl">
            <p>数量</p>
            <div>
                <span class="num_sub">-</span>
                <input type="text" value=1>
                <span class="num_add">+</span>
            </div>
        </div>
        <button class="iconfont icon-gouwuche">加入购物车</button>
    </div>








`

// imgBox.firstElementChild.src = data.img_url;

// for(let i = 0; i<smallImgBox.children.length; i++) {
//     smallImgBox.children[i].firstElementChild.src = data.img_url;
//     smallImgBox.children[i].firstElementChild.dataset.show = data.img_url;
//     smallImgBox.children[i].firstElementChild.dataset.enlarge = data.img_url;

// }

// titleBox.innerText = data.title;
// priceBox.innerText = data.price;
// saleBox.innerText = data.sale;
const bigBox = document.querySelector('.big_img');

bigBox.style.backgroundImage = `url(${data.img_url})`


// 2.绑定点击事件
const infoBox = document.querySelector('.goods_info');
const numBox = document.querySelector('.sl>div>input');
infoBox.addEventListener('click', e => {
    e = e || window.event;
    const target = e.target || e.srcElement;
    // 2-1.判断点击的是尺寸span
    if(target.className === 'size_item') {
        data.size =  target.innerText;
    }
    // 2-2.判断点击的是数量减span
    if(target.className === 'num_sub'){
        let num = numBox.value - 0;
        if(num > 1) {
            num--;
        }
        numBox.value = num;
    }
    // 2-3.判断点击的是数量加span
    if(target.className === 'num_add'){
        let num = numBox.value - 0;
        num ++;
        numBox.value = num;

    }
    // 2-4.判断点击的是购物车按钮
    if(target.tagName === 'BUTTON') {
        data.num = numBox.value
        const cartList = JSON.parse(window.localStorage.getItem('cartList')) || [];
        const cartGoods = cartList.find(item => item.id === id);
    
        if(cartGoods) {
            cartGoods.num = data.num;
            cartGoods.size = data.size;
           
        }else{
            cartList.push(data);
        }

        window.localStorage.setItem('cartList', JSON.stringify(cartList));
        
        // console.log(JSON.parse(window.localStorage.getItem('cartList')));
        const tip = window.confirm('购物车加入成功，点击登录跳转到购物车')
        if(tip) window.location.href = './cart.html';
        
    }
})

